<template>
  <a-card id="all" :bordered="false">
    <div @click="returnLast()" class="return">
      <i class="iconfont icon-return"></i>
       返回
        </div>
  
  
  
    <a-row>
      <a-col :span="8">
        <a-card class="card1" :bordered="false">
        
         
            <div id="equipmentDiv"></div>
            
          
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card class="card1" style="height:310px;margin-left:25px" :bordered="false">
          <a-row>
            <a-col :span="24">
              <div id="houseDiv"></div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card class="card1" style="height:310px;margin-left:25px;padding-right:20px" :bordered="false">
          <a-row>
            <a-col :span="6">
              <div id="switch">
                <p class="incircle">6</p>
              </div>
              <p class="circle">开关使用时长(小时)</p>
            </a-col>
            <a-col :span="2"></a-col>
            <a-col :span="6">
              <div id="socket">
                <p class="incircle">6</p>
              </div>
              <p class="circle">插座使用时长(小时)</p>
            </a-col>
             <a-col :span="2"></a-col>
            <a-col :span="6">
              <div id="distributionBox">
                <p class="incircle">6</p>
              </div>
              <p class="circle" >智能配电箱使用时长(小时)</p>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>
<script>
export default {
  components: {},
  provide() {
    return {};
  },
  data() {
    return {};
  },
  mounted() {
    this.$chart.houseEquipmentBar("equipmentDiv");
    this.$chart.houseBar("houseDiv");
 
  },
  methods: {
    returnLast () {
      console.log('1111');
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
#all {
  padding: 0;
  position: relative;
  width: 1620px;
  height: 100%;
  background: rgba(239, 244, 247, 1);
}
.card1 {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}
#equipmentDiv {
  height: 280px;
  width: 560px;
  margin-top: -20px;
  padding-right: 100px;
}
#houseDiv {
  height: 280px;
  width: 100%;
}

#switch {
  width: 134px;
  height: 134px;
  background-color: #8A14FF;
  border-radius: 50%;
  margin: auto;
  position: relative;
  top:40px
}
#socket {
  width: 134px;
  height: 134px;
  background-color: #FF9D36;
  border-radius: 50%;
  margin: auto;
  position: relative;
  top:40px
}
#distributionBox{
  width: 134px;
  height: 134px;
  background-color: #00D5DC;
  border-radius: 50%;
  margin: auto;
  position: relative;
  top:40px
}

.circle {
  width: 300px;
  color: black;
  position: relative;
  top: 80px;
  left: 2px;
  font-size: 14px;
  font-weight: 500;

}

.incircle {
  color: aliceblue;
  position: relative;
  top: 40px;
  left: 58px;
  font-size: 32px;
  font-weight: 540;
  text-shadow: -1px 1px 1px rgba(255, 255, 255, 0.6);
}
.return {

  position: relative;
  margin-left: 1500px;
  font-size: 20px;
  cursor: pointer;
  color: rgba(0, 0, 0, 1);
  font-weight: bold;
  top: -10px; 
}
</style>